<template>
  <div style="background-color: white">
    <el-tag size="medium" style="height: 42px;margin-left: 10px;margin-top: 15px;" type="danger">资产送修</el-tag>
    <div class="static-content-item" style="margin-top: -10px">
      <el-divider direction="horizontal"></el-divider>
    </div>
    <div style="float: right;margin-right: 90px;margin-top: 7px">
      <div >
<!--            添加资产送修申请-->
      <el-icon size="30px" style="background-color: #2DB7F5" title="添加" @click="dialogVisible = true" >
        <folder-add />
      </el-icon>
<!--        -->
        <el-dialog
            v-model="dialogVisible"
            :before-close="handleClose"
            title="申请单"
            width="65%">


          <!--          弹出框-->
          <el-form ref="vForm" :model="formData" :rules="rules" label-position="left"
                   size="default" @submit.prevent>
            <div class="static-content-item">
              <el-divider direction="horizontal">资产维修申请单</el-divider>
            </div>
            <div style="margin-top: 20px">
              <el-row>
                <el-col :offset="4" :span="8" class="grid-cell">
                  <el-form-item class="label-right-align" label="经办人：" prop="input43916">
                    <el-input v-model="formData.input43916" clearable type="text"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="grid-cell" style="margin-left: 20px">
                  <el-form-item class="label-right-align" label="送修资产：" prop="input81753">
                    <el-input v-model="formData.input81753" clearable type="text"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="4" :span="8" class="grid-cell">
                  <el-form-item class="label-right-align" label="送修时间：" prop="time78608">
                    <el-time-picker v-model="formData.time78608" class="full-width-input" clearable
                                    format="HH:mm:ss" value-format="HH:mm:ss"></el-time-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="grid-cell" style="margin-left: 20px">
                  <el-form-item label="送修单位：" prop="input98552">
                    <el-input v-model="formData.input98552" clearable type="text"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="4" :span="12" class="grid-cell">
                  <el-form-item label="备注：" prop="textarea94492">
                    <el-input v-model="formData.textarea94492" rows="3" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>


          <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
          </template>
        </el-dialog>
<!--        -->




        <el-icon size="30px" style="margin-left: 20px;background-color: #2DB7F5" title="删除">
          <folder-remove />
        </el-icon>
      </div>
    </div>
    <div class="static-content-item" style="margin-top: 48px" >
      <el-divider direction="horizontal"></el-divider>
    </div>
    <div>
      <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="日期" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" width="120"> </el-table-column>
        <el-table-column label="地址" prop="address" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>





  </div>

</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance
}
  from 'vue'
export default defineComponent({
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },

      ],
      dialogVisible: false,
      multipleSelection: [],
    }
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    Maintain_Add(){
      this.$router.push('/Maintain_Add')
    }
    ,
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
    },
  },
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        input43916: "",
        input81753: "",
        time78608: null,
        input98552: "",
        textarea94492: "",
      },
      rules: {},
    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    }
    const resetForm = () => {
      instance.ctx.$refs['vForm'].resetFields()
    }
    return {
      ...toRefs(state),
      submitForm,
      resetForm
    }
  }
})

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>